
Security News
Meet the Socket Team at RSAC and BSidesSF 2025
Join Socket for exclusive networking events, rooftop gatherings, and one-on-one meetings during BSidesSF and RSA 2025 in San Francisco.
@rmwc/list
Advanced tools
Lists are continuous, vertical indexes of text or images.
ListItems can be verbose to import and render. A non-standard 'SimpleListItem' has been created to improve the developer experience which contains a default template for ListItems.
import {
List,
ListItem
} from '@rmwc/list';
<List>
<ListItem>Cookies</ListItem>
<ListItem>Pizza</ListItem>
<ListItem>Icecream</ListItem>
</List>
import {
List,
SimpleListItem
} from '@rmwc/list';
<List twoLine>
<SimpleListItem graphic="star_border" text="Cookies" secondaryText="Chocolate chip" meta="info" />
<SimpleListItem graphic="favorite_border" text="Pizza" secondaryText="Pepperoni" meta="info" />
<SimpleListItem graphic="mood" text="Icecream" secondaryText="Chocolate cookie dough" meta="info" />
</List>
When using the twoLine
prop, you have to wrap the contents of the ListItem
in ListItemText
.
import {
List,
ListItem,
ListItemText,
ListItemPrimaryText,
ListItemSecondaryText
} from '@rmwc/list';
<List twoLine>
<ListItem>
<ListItemText>
<ListItemPrimaryText>Cookies</ListItemPrimaryText>
<ListItemSecondaryText>$4.99 a dozen</ListItemSecondaryText>
</ListItemText>
</ListItem>
<ListItem>
<ListItemText>
<ListItemPrimaryText>Pizza</ListItemPrimaryText>
<ListItemSecondaryText>$1.99 a slice</ListItemSecondaryText>
</ListItemText>
</ListItem>
<ListItem>
<ListItemText>
<ListItemPrimaryText>Icecream</ListItemPrimaryText>
<ListItemSecondaryText>$0.99 a scoop</ListItemSecondaryText>
</ListItemText>
</ListItem>
</List>
import {
List,
ListItem,
ListItemGraphic,
ListItemMeta
} from '@rmwc/list';
<List>
<ListItem>
<ListItemGraphic icon="favorite"/>
Leading
</ListItem>
<ListItem>
Trailing
<ListItemMeta icon="star"/>
</ListItem>
<ListItem>
<ListItemGraphic icon="wifi"/>
Leading and Trailing
<ListItemMeta icon="info"/>
</ListItem>
</List>
import {
List,
ListGroup,
ListDivider,
ListItem,
ListItemGraphic,
ListItemMeta,
} from '@rmwc/list';
<List twoLine avatarList>
<ListGroup>
<ListItem>
<ListItemGraphic icon="person" style={{backgroundColor: 'lightgray'}} />
Bruce Wayne
<ListItemMeta icon="info"/>
</ListItem>
<ListItem>
<ListItemGraphic icon="person" style={{backgroundColor: 'coral'}} />
Clark Kent
<ListItemMeta icon="info"/>
</ListItem>
</ListGroup>
<ListDivider />
<ListGroup>
<ListItem>
<ListItemGraphic icon="person" style={{backgroundColor: 'lightblue'}} />
Diana Prince
<ListItemMeta icon="info"/>
</ListItem>
</ListGroup>
</List>
import {
List,
ListItem,
ListItemGraphic,
} from '@rmwc/list';
import { Checkbox } from '@rmwc/checkbox';
<List>
<ListItem onClick={() => this.setState({cookiesChecked: !this.state.cookiesChecked})}>
<ListItemGraphic icon={<Checkbox checked={this.state.cookiesChecked}/>}/>
Cookies
</ListItem>
<ListItem onClick={() => this.setState({pizzaChecked: !this.state.pizzaChecked})}>
<ListItemGraphic icon={<Checkbox checked={this.state.pizzaChecked}/>}/>
Pizza
</ListItem>
<ListItem onClick={() => this.setState({iceCreamChecked: !this.state.iceCreamChecked})}>
<ListItemGraphic icon={<Checkbox checked={this.state.iceCreamChecked}/>}/>
Icecream
</ListItem>
</List>
import { DocumentComponent } from '@rmwc/base/utils/document-component';
import * as docs from './docgen.json';
<DocumentComponent docs={docs} displayName="List" />
<DocumentComponent docs={docs} displayName="ListItem" />
<DocumentComponent docs={docs} displayName="ListItemPrimaryText" />
<DocumentComponent docs={docs} displayName="ListItemSecondaryText" />
<DocumentComponent docs={docs} displayName="ListItemGraphic" />
<DocumentComponent docs={docs} displayName="ListItemMeta" />
<DocumentComponent docs={docs} displayName="ListDivider" />
<DocumentComponent docs={docs} displayName="ListGroup" />
<DocumentComponent docs={docs} displayName="ListGroupSubheader" />
<DocumentComponent docs={docs} displayName="SimpleListItem" />
3.0.11 (2018-11-23)
FAQs
RMWC List component
The npm package @rmwc/list receives a total of 7,094 weekly downloads. As such, @rmwc/list popularity was classified as popular.
We found that @rmwc/list demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Join Socket for exclusive networking events, rooftop gatherings, and one-on-one meetings during BSidesSF and RSA 2025 in San Francisco.
Security News
Biome's v2.0 beta introduces custom plugins, domain-specific linting, and type-aware rules while laying groundwork for HTML support and embedded language features in 2025.
Security News
Next.js has patched a critical vulnerability (CVE-2025-29927) that allowed attackers to bypass middleware-based authorization checks in self-hosted apps.